iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 24
0
Modern Web

UI/UX/ProtoPie入門-喵喵設計師的學習日記系列 第 24

DAY 24-Daily UI 006 User Profile 實作分享(prototype)(四)

  • 分享至 

  • xImage
  •  

今天接續著做場景2,這一頁要做的效果是點擊頭像可以放大頭像查看,一樣對頭像添加單擊觸發,把場景3的物件複製過來,先做頭像放大的部分。

把放大的頭像照片複製一個,用原本的照片縮小到比頭像小,並把錨點改成中間。

把原本大小的數值複製,對縮小的頭像照片新增“大小”動作並把數值貼上,這樣縮小的照片就會放大到原本的大小,就可以把複製的照片刪掉了。

選擇照片把透明度調成0%,新增“透明度”動作,把數值調成100%,這樣就有淡入放大的效果。

照片完成後換透明遮罩,這邊只要讓他簡單的出現,所以跟上面”透明度“動作的做法一樣,設定完就可以看看效果。

接下來要讓他任意點擊旁邊就可以關閉放大的照片,所以選擇透明遮罩添加單擊觸發,再新增”透明度“動作將數值降至0%,照片的部分就把原本的數值複製,新增“大小”動作,把數值貼上,就會縮小回去。

最後就是要回到首頁,也是任意點擊旁邊就會關閉資訊頁,那這邊就是比較簡單的對底部色塊添加單擊觸發,再新增轉場回到場景1,就完成囉!來看一下完整的效果。

那 User Profile 的 prototype 也完成囉!明天繼續介紹別的作品,掰呦喵!


上一篇
DAY 23-Daily UI 006 User Profile 實作分享(prototype)(三)
下一篇
DAY 25-Daily UI 007 Setting 實作分享(一)
系列文
UI/UX/ProtoPie入門-喵喵設計師的學習日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言